<template>

    <div class="pro_box">
        <div class="top_box">
            <div class="title">项目列表</div>
            <div class="btn_box">
                <el-button type="primary" size="default" icon="Plus" @click="clickAdd">添加项目</el-button>
                <el-button type="success" size="default" icon="User" @click="logout">退出登录</el-button>
            </div>
        </div>


        <el-row :gutter="20">
            <el-col :span="4" v-for='project in pro_list' :key="project.id">
                <el-card class="box-card">
                    <div class="box_contents">
                        <!--图标-->
                        <div class="icon_box">
                            <el-icon color="#55aa7f" size="30" style="margin-top: 10px">
                                <Platform/>
                            </el-icon>
                        </div>
                        <!--项目名称-->
                        <div class="pro_name">
                            <!--通过长度来判断是否是需要显示或者部分显示-->
                            <span v-if="project.name.length <= 8"> {{ project.name }}</span>
                            <el-tooltip
                                    v-else
                                    class="box-item"
                                    effect="dark"
                                    :content="project.name"
                                    placement="top-start"
                            >
                                <span> {{ project.name.slice(0, 8) }}...</span>
                            </el-tooltip>

                        </div>
                        <!--负责人-->
                        <div class="leader">负责人：{{ project.leader }}</div>
                    </div>
                    <!--按钮-->
                    <div class="btn">
                        <!--编辑按钮-->
                        <el-button
                            @click="clickEdit(project)"
                            type="info" plain size="small" icon="Edit"
                            style="float: left">编辑</el-button>
                        <!--删除按钮-->
                        <el-button
                                @click="clickDel(project.id)"
                                type="danger" plain size="small"
                                icon="Delete" style="float: right">删除
                        </el-button>
                    </div>

                </el-card>
            </el-col>
        </el-row>


    </div>


    <!--dialog添加弹出框-->
    <el-dialog v-model="showAddDialog" title="添加项目" width="35%">

        <!--弹框中的输入表单-->
        <el-form :model="addForm">
            <el-form-item label="项目名">
                <el-input v-model="addForm.name"/>
            </el-form-item>
            <el-form-item label="负责人">
                <el-input v-model="addForm.leader"/>
            </el-form-item>
        </el-form>
        <!--弹框中的按钮-->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showAddDialog = false">取消</el-button>
                <el-button type="primary" @click="addProject">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>


    <!--dialog 编辑 弹出框-->
    <el-dialog v-model="showEditDialog" title="编辑项目" width="35%">

        <!--弹框中的输入表单-->
        <el-form :model="editForm">
            <el-form-item label="项目名">
                <el-input v-model="editForm.name"/>
            </el-form-item>
            <el-form-item label="负责人">
                <el-input v-model="editForm.leader"/>
            </el-form-item>
        </el-form>
        <!--弹框中的按钮-->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showEditDialog = false">取消</el-button>
                <el-button type="primary" @click="updateProject">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>

</template>

<script lang="ts">
import {Plus, User} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
    name: "AllProject",
    computed: {
        User() {
            return User
        },
        Plus() {
            return Plus
        }
    },
    data() {
        return {
            pro_list: [],
            // 是否显示添加项目的 弹框
            showAddDialog: false,
            // 是否显示编辑的项目 弹窗
            showEditDialog: false,
            // 添加项目的 表单
            addForm:{
                name: '',
                leader: ''
            },
            // 编辑项目的 表单
            editForm:{
                name: '',
                leader: ''
            },
            // 当前 项目的 id
            proId: 0
        }
    },
    methods: {
        // 退出登录的方法
        logout() {
            // 删除登录页面的凭证(token)
            window.sessionStorage.removeItem('token')
            window.sessionStorage.removeItem('uname')
            window.localStorage.removeItem('uInfo')
            // 让页面跳转到登录页面
            // @ts-ignore
            this.$router.push('/login')
            // @ts-ignore
            this.$message.success('已注销登录')
        },
        async getProjects() {
            // @ts-ignore
            // 发送请求，获取项目列表
            const res = await this.$api.getProjects()
            if (res.status == 200) {
                // @ts-ignore
                this.pro_list = res.data
            }
        },

        async deletePro(id:number) {
            // 发送请求到后端,删除项目
            // alert(`执行删除的项目的id是: ${id}`)
            // @ts-ignore
            const res = await this.$api.deleteProject(id)

            if (res.status == 204) {
                // @ts-ignore
                this.$message.success('删除成功')
                await this.getProjects()
            }

        },

        clickDel(id:number) {
            ElMessageBox.confirm(
                '确认要删除该项目?此操作不可恢复！',
                '提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                // TODO 点击确认执行 .then() =>
                .then(() => {
                    this.deletePro(id)
                })
                // TODO 点击取消 执行 .catch() =>
                .catch(() => {
                    // @ts-ignore
                    this.$message.info('删除取消')
                })
        },

        // 点击添加项目的 按钮
        clickAdd(){
            // @ts-ignore
            this.addForm = {
                name: '',
                leader: ''
            }

            // @ts-ignore
            this.showAddDialog = true
        },

        // 发送添加项目的请求 到 后端
        async addProject(){
            // @ts-ignore
            const res = await this.$api.createProject(this.addForm)
            if (res.status === 201){
                // @ts-ignore
                this.$message.success('添加成功')
                await this.getProjects()
                // @ts-ignore
                this.showAddDialog = false
            }
        },

        // 编辑项目的 弹窗
        // @ts-ignore
        clickEdit(project){
            // @ts-ignore
            this.showEditDialog = true
            // TODO 将 pro 对象 赋值给 editForm
            // @ts-ignore
            this.editForm = {...project}
            console.log('-------------------------------')
            console.log(project)
            // @ts-ignore
            console.log(this.editForm)
        },

        // 发送请求到 后端，修改页面编辑的 数据
        async updateProject(){
            // @ts-ignore
            const id = this.editForm.id
            const params = {
                // @ts-ignore
                name: this.editForm.name,
                // @ts-ignore
                leader: this.editForm.leader
            }

            // @ts-ignore
            const res = await this.$api.updateProject(id,params)

            if(res.status == 200) {
                // @ts-ignore
                this.$message.success('修改成功!')
                // @ts-ignore
                this.showEditDialog = false
                await this.getProjects()
            }

        }
    },

    created() {
        // @ts-ignore
        this.getProjects()
    }
}
</script>

<style scoped>

.pro_box {
    max-width: 1450px;
    margin: 0 auto;
    padding-top: 40px;
}

.top_box {
    border-bottom: solid 5px #55aa7f;
    height: 40px;
}

.top_box .title {
    float: left;
    color: #55aa7f;
    font: bold 20px/30px "微软雅黑";
}

/*按钮区域*/
.top_box .btn_box {
    float: right;
}

/*项目列表卡片*/
.box-card {
    height: 250px;
    width: 200px;
    margin: 20px auto 0;
}

/*项目卡片中的 图标*/
.icon_box {
    width: 50px;
    height: 50px;
    background: #e5f6ed;
    text-align: center;
    /*line-height: 60px;*/
    border-radius: 50%;
    margin: 0 auto;
}

/*设置盒子里面的内容居中*/
.box_contents {
    /*margin: 0 auto;*/
    text-align: center;
}

/*项目名*/
.pro_name {
    font: bold 18px/30px '微软雅黑';
    margin-top: 20px;
}

/*负责人*/
.leader {
    color: #ababab;
    font-size: 13px;
}

/*设置按钮(便捷--删除)*/
.btn {
    margin-top: 70px;
    margin-left: 10px;
}

</style>